<template>
  <acme-popup v-model="showPopup" :styles="{width: '630rpx', height: '805rpx', borderRadius: '16rpx'}"
    :clickOverlayClose="false"
  >
    <view class="title">闯关成功</view>
    <image class="icon" src="/static/popup/popup_icon1.png"></image>
    <view class="brief">
      <text>恭喜获得<text>¥19.95</text>现金奖金</text>
    </view>
    <acme-button :w="540" :h="90" block @click="confirm">
      分享战绩获得复活卡
    </acme-button>
    <view class="text-btn" @click="cancel">
      取消
    </view>
  </acme-popup>
</template>

<script>
  export default {
    props: {
      value: Boolean,
      exIndex: Number
    },
    watch: {
      value(show) {
        this.showPopup = show
      },
      showPopup(show) {
        if(!show) {
          this.closePopup()
        }
      }
    },
    data() {
      return {
        showPopup: false,
      }
    },
    methods: {
      closePopup() {
        this.$emit('input', false)
      },
      confirm() {
        if(this.exIndex === 1) {
          this.closePopup()
          this.$emit('receive')
        }else {
          this.$emit('share', '送你30天免费VIP，点击')
          this.closePopup()
        }
      },
      cancel() {
        this.closePopup()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .popup {
    text-align: center;
    
    .title {
      display: block;
      line-height: 1;
      color: #333;
      font-size: 36upx;
      font-weight: 500;
      margin-top: 78upx;
    }
    
    .icon {
      width: 420upx;
      height: 350upx;
      display: block;
      margin: auto;
      margin-top: 19upx;
    }
    
    .brief {
      width: 528upx;
      color: #999;
      font-size: 30rpx;
      line-height: 38upx;
      text-align: center;
      margin: auto;
      margin-top: 40upx;
      text-align: center;
      
      text {
        text {
          color: red;
          font-size: 60upx;
          margin: 0 8upx;
        }
      }
    }
    
    .acme-button {
      background: linear-gradient(90deg, #FF5548, #FF077B) !important;
      position: absolute;
      bottom: 105upx;
      left: 0;
      right: 0;
      margin: auto;
      border-radius: 100upx !important;
    }
    
    .text-btn {
      width: 200upx;
      color: #333;
      font-size: 28upx;
      text-align: center;
      margin: auto;
      margin-top: 27upx;
      padding: 10upx 0;
      line-height: 1;
      position: absolute;
      bottom: 35upx;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
</style>
